<template>

	<view class="content">

		<view class="content-top">
			<view class="content-title">
				<text>异常模型选择</text>
			</view>
			<hr>
			<uni-table type="selection" @selection-change="selectionChange" ref="table" :loading="uLoading" border
				stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">异常项目编码</uni-th>
					<uni-th align="center">异常项目名称</uni-th>
					<uni-th align="center">异常类型</uni-th>
					<uni-th align="center">异常等级</uni-th>
					<uni-th align="center">处理人</uni-th>
					<uni-th align="center">处理组</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in exceptionModelList" :key="index">
					<uni-td>{{ item.itemCode }}</uni-td>
					<uni-td>{{ item.itemName }}</uni-td>
					<uni-td>{{ findLabelByValue('type',item.exceptionTypeId) }}</uni-td>

					<uni-td>{{ findLabelByValue('level',item.exceptionLevelId) }}</uni-td>

					<uni-td>{{ item.handlerIdName }}</uni-td>

					<uni-td>{{ item.groupIdName }}</uni-td>



				</uni-tr>

			</uni-table>
			<br />
			<uni-pagination @change="change" title="标题文字" show-icon="true" :total="total" current="1" pageSize='10'
				showIcon='true'></uni-pagination>
		</view>
		<view class="content-bottom">

			<view class="tab-list1">
				<u-form :model="form1" ref="uForm">
					<u-form-item :border-bottom="false">
						<view style="display: flex; margin: 0 auto;">
							<u-button @click="submit" type="primary" size="medium"><u-icon
									name="arrow-upward"></u-icon>确定
							</u-button>
							<view style="width:20px">

							</view>
							<u-button @click="cancel" type="primary" size="medium"><u-icon name="close"></u-icon>取消
							</u-button>

						</view>
					</u-form-item>
				</u-form>
			</view>
			<u-toast ref="uToast" />
			<u-mask class="loadingBox" :show="uLoading" @click="uLoading = false" :mask-click-able="false">
				<u-loading class="uLoading" mode="circle" :show="uLoading" size="100"></u-loading>
			</u-mask>
		</view>





	</view>
</template>

<script>
	export default {
		components: {},

		data() {
			return {
				uLoading: false,
				exceptionLevel: [],
				exceptionType: [],
				exceptionStatus: [],
				showexception: false,
				exceptionModelList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,

				},
				total: 0,
				form1: {},
				currIndex: []
			};
		},



		created() {
			this.$u.api.getDicts('exception_level').then(res => {
				this.exceptionLevel = res.data;
				console.log('异常等级', this.exceptionLevel)

			})
			this.$u.api.getDicts('exception_type').then(res => {
				this.exceptionType = res.data;
				console.log('异常类型', this.exceptionType)

			})
			// this.$u.api.getDicts('exception_status').then(res => {
			// 	this.exceptionStatus = res.data;

			// })

			this.$u.api.listExceptionModel(this.queryParams).then(res => {
				console.log('异常建模', res)
				this.exceptionModelList = res.rows;
				this.total = res.total;
			})


		},

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.formData.setRules(this.rules)
		},
		methods: {
			// 匹配字典
			findLabelByValue(type, value) {
			if(type=='level'){
				const item = this.exceptionLevel.find(obj => obj.dictValue === value);
				return item ? item.dictLabel : null;
			}else{
				const item = this.exceptionType.find(obj => obj.dictValue === value);
				return item ? item.dictLabel : null;
			}

			},
			// 表格选择变化
			selectionChange(e) {
				// if(e.detail.index.length==1){
				// 	this.currSelect = this.exceptionModelList[e.detail.index[0]]
				// 	console.log('selectionChange', e.detail.index,this.currSelect )
				// }else{
				// 	this.currSelect=null
				// 	this.$refs.table.clearSelection()
				// 	return 	this.$refs.uToast.show({
				// 			title: '只能选择一条数据',
				// 			type: 'warning',
				// 		})
				// }
				this.currIndex = e.detail.index
			},
			// 分页器变化
			change(e) {
				this.queryParams.pageNum = e.current
				this.getList()
			},
			// 选择异常建模
			selectException() {
				console.log('selectException')
				this.showexception = true;
			},


			// 取消提交
			cancel() {


				this.$emit("close-popup"); // 触发父组件的关闭事件
			},

			submit() {
				console.log('提交', this.currIndex)
				if (this.currIndex.length == 1) {
					uni.$emit('exceptionModelSelect', this.exceptionModelList[this.currIndex[0]])

				} else {
					return this.$refs.uToast.show({
						title: '请只选择一条数据',
						type: 'warning',
					})
				}


			},



			close() {
				this.showexception = false;
			}



		},
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.content-title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 600;
			margin: 10px;
		}

		.content-top {
			padding: 20rpx;
			height: 10%;
			width: 100%;
		}

		.content-bottom {
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-top: 20rpx;
			padding: 30rpx;
		}

		.tab-content {
			width: 100%;
			position: relative;

			.tabs {
				display: flex;
				position: relative;
				color: rgb(70, 71, 72);
				border-bottom: 2rpx solid rgb(193, 193, 193);

				.tabs-item {
					margin-right: 80rpx;
					cursor: pointer;
					font-size: 32rpx;

					&.active {
						color: #2979ff;
						z-index: 9;

						&::after {
							content: "";
							bottom: -4rpx;
							left: 0;
							right: 0;
							height: 4rpx;
							background: #2979ff;
						}
					}
				}
			}

			.tab-list {
				// display: flex;
				// align-items: center;
				width: 100%;
				margin: 20rpx 0;
			}
		}
	}
</style>